import React, { useState, useEffect } from 'react'
import { Table, Radio } from 'antd'
import style from './Index.module.less'
import { dealData, getMainColumns, expandedRowRender } from './table'
import Modal from './Modal'

// 根据类型和证据处理数据
function dealDataByTypeAndEvidence (type, evidence, setData) {
  const l = evidence.filter(li => {
    if (type === '全部') {
      return true
    }
    if (type === '其他') {
      return !['申请人', '被申请人'].includes(li.submittal_type)
    }
    return li.submittal_type === type
  })
  setData(l)
}

function Main ({ caseDetail }) {
  const [evidence, setEvidence] = useState([])
  const [data, setData] = useState([])
  const [type, setType] = useState('全部')
  const [visible, setVisible] = useState(false)
  const [signature, setSignature] = useState([])
  const [expandable, setExpandable] = useState({})
  useEffect(() => {
    setEvidence(dealData(caseDetail.evidence))
  }, [caseDetail])
  useEffect(() => {
    dealDataByTypeAndEvidence(type, evidence, setData)
  }, [evidence, type])
  useEffect(() => {
    setExpandable({ expandedRowRender: expandedRowRender(setSignature, setVisible) })
  }, [])
  return (
    <div className={style.container}>
      <Modal open={visible} data={signature} hide={() => { setVisible(false); setSignature([]) }} />
      <div className={style['title-line']}>
        <span className={style.title}>证据列表</span>
        <Radio.Group value={type} onChange={e => setType(e.target.value)}>
          <Radio.Button value='全部'>全部</Radio.Button>
          <Radio.Button value='申请人'>申请人</Radio.Button>
          <Radio.Button value='被申请人'>被申请人</Radio.Button>
          <Radio.Button value='其他'>其他</Radio.Button>
        </Radio.Group>
      </div>
      <div className={style['table-container']}>
        <Table rowKey='index' columns={getMainColumns()} expandable={expandable} dataSource={data} pagination={false} />
      </div>
    </div>
  )
}

export default Main
